<script setup>
import { onMounted, ref } from 'vue'
import { getTrafficGuide } from '@/api/play'
import { fixContentImageUrls } from '@/utils/fixImageUrls'

const busGuide = ref({
  content: '',
  latitude: 0,
  longitude: 0,
  remark: '',
})
async function onGetTrafficGuide() {
  const { result } = await getTrafficGuide()
  busGuide.value = {
    ...result,
    content: fixContentImageUrls(result.content),
  }
}

function onShowAddress() {
  uni.openLocation({
    name: busGuide.value.remark,
    latitude: +busGuide.value.latitude,
    longitude: +busGuide.value.longitude,
  })
}

onMounted(() => {
  onGetTrafficGuide()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="公共交通指引" custom-color="#000" left-show placeholder fixed />
    <view class="px-2 pt-2 m-2 bg-white rounded">
      <view class="py-3">
        <rich-text :nodes="busGuide.content" selectable />
      </view>
      <view class="px-20 pb-3">
        <nut-button plain block custom-color="#1890FF" @click="onShowAddress">
          <template #icon>
            <view class="i-ion:location-outline" />
          </template>
          去这里
        </nut-button>
      </view>
    </view>
  </view>
</template>
